<template>
  <div>
    <h1>Welcome</h1>
    <el-date-picker
      v-model="day"
      type="date"
      @blur="blur"
      value-format="yyyyMMdd"
      :picker-options="pickerOptions"
      placeholder="选择日期">
    </el-date-picker>
    <el-date-picker
      @change="weekChange"
      v-model="week"
      type="week"
      format="yyyy 第 WW 周"
      value-format="yyyyMMdd"
      :picker-options="pickerOptions"
      placeholder="选择周">
    </el-date-picker>
    <el-date-picker
      v-model="year"
      @blur="blur2"
      type="year"
      value-format="yyyy"
      :picker-options="pickerOptions"
      placeholder="选择年">
    </el-date-picker>
  </div>
</template>

<script>
  Date.prototype.format = function(fmt) {
    const o = {
      'M+': this.getMonth() + 1,
      'd+': this.getDate(),
      'h+': this.getHours(),
      'm+': this.getMinutes(),
      's+': this.getSeconds(),
      'q+': Math.floor((this.getMonth() + 3) / 3),
      S: this.getMilliseconds()
    }

    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    }

    for (const k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
  }
  export default {
    name: 'Welcome',
    data() {
      return {
        // 存储最新周期时间传入字符串yyyy-MM-dd
        latestCycle: '2020-03-8',
        day: '20200315',
        year: '20200315',
        week: '',
        pickerOptions: {
          disabledDate: this.disabledDate(),
          firstDayOfWeek: 1
        }
      }
    },
    methods: {
      blur() {
        console.log(this.day)
      },
      weekChange() {
        const date = new Date((new Date(this.week.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3')).getTime() + 5 * 24 * 3600 * 1000))
        this.week = new Date(date).format('yyyyMMdd')
        console.log(this.week)
      },
      blur2() {
        console.log(this.year)
      },
      disabledDate() {
        // 获取最新的周期时间，超过不可选中
        return (time) => {
          return time.getTime() > new Date(this.latestCycle).getTime()
        }

      }
    }
  }
</script>

<style scoped>

</style>
